<template>
    <div class="set-path">
        <Header>
            <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
            <div class="title" v-text="option.model == 'set' ? '编辑地址' : '新增地址'"></div>
            <template v-slot:icon-r><span></span></template>
        </Header>
        <section>
            <!-- 新增地址 -->
            <van-address-edit v-if="option.model == 'add'" :area-list="areaList" show-set-default show-search-result
                @save="onSave" />
            <!-- 编辑地址 -->
            <van-address-edit v-else :address-info='AddressInfo' :area-list="areaList" show-delete show-set-default
                show-search-result @save="onUpdate" @delete="onDelete" />
        </section>
    </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { Toast, AddressEdit } from 'vant';
import { areaList } from '@vant/area-data'
export default {
    components: {
        Header,
        [Toast.name]: Toast,
        [AddressEdit.name]: AddressEdit
    },
    data() {
        return {
            areaList,
            option: {
                model:'set'
            },
            AddressInfo: {}
        }
    },
    computed: {},
    watch: {},
    methods: {
        goBack() {
            this.$router.back()
        },
        //新增地址
        onSave(content) {

            this.$axios({
                url: '/api/addAddRess',
                method: 'post',
                data: {
                    ...content
                },
                headers: {
                    token: true
                }
            }).then(res => {
                if (!res) {
                    this.$router.push({ name: 'login' })
                }
                Toast(res.data.msg);
                if (this.$route.query.type == 'addPath') {
                    localStorage.setItem('selectPath',JSON.stringify(content))
                    let page = this.$route.query.page
                    this.$router.go(-page)
                    return
                }
                this.$router.push({ name: 'path' })

            })
        },
        //编辑地址
        onUpdate(content) {
            content._id = this.option._id
            this.$axios({
                url: '/api/updateAddress',
                method: 'post',
                data: {
                    ...content
                },
                headers: {
                    token: true
                }
            }).then(res => {
                if (!res.data) return
                Toast(res.data.msg);
                this.$router.push({ name: 'path' })
            })
        },
        //删除
        onDelete(content) {
            content._id = this.option._id
            this.$axios({
                url: '/api/deleteAddress',
                method: 'post',
                data: {
                    ...content
                },
                headers: {
                    token: true
                }
            }).then(res => {
                if (!res) return
                Toast(res.data.msg)
                this.$router.push({ name: 'path' })
            })
        }
    },
    created() {
        if (this.$route.query.type == 'addPath') {
            this.option.model = 'add'
            return
        }
        if (this.$route.params.option) {
            this.option = this.$route.params.option
            localStorage.setItem('pathOption', JSON.stringify(this.$route.params.option))
        } else {
            this.option = JSON.parse(localStorage.getItem('pathOption'))
        }
        this.AddressInfo = this.option
    },
    mounted() { },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() {
    }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.set-path {
    .header {
        .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
        }

        ::v-deep .icon-l {
            width: auto;
        }
    }

    section {
        background-color: #F7F7F7;
        height: calc(100vh - 3.2rem);

        .van-address-edit {
            padding: 0;
        }

        ::v-deep .van-address-edit__buttons {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ::v-deep .van-button--danger {
            width: 8rem;
            height: 1.066666rem;
            background-color: #b0352f;
        }

        ::v-deep .van-switch--on {
            background-color: #b0352f;
        }
    }
}
</style>
